<template>
  <div class="wrap">
    <div class="item">
      <div class="icon icon1"></div>
      <div class="desc">今日客流</div>
      <div class="count count1">{{wcData.klDayCount | mkfs}}</div>
    </div>
    <div class="item">
      <div class="icon icon2"></div>
      <div class="desc">本月客流</div>
      <div class="count count2">{{wcData.klMonthSum | mkfs}}</div>
    </div>
    <div class="item">
      <div class="icon icon3"></div>
      <div class="desc">本年客流</div>
      <div class="count count3">{{wcData.klYearSum | mkfs}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    wcData: {
      type: Object,
      require: true,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  filters: {
    mkfs: function (value) {
      if (value === undefined) return 0;
      return value;
    },
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  width: 505px;
  height: 250px;
  box-sizing: border-box;
  padding: 48px 48px 0px 48px;
  background: url("../../assets/img/home-04.png") no-repeat center center;
  background-size: contain;
  display: flex;
  .item {
    .icon {
      width: 133px;
      height: 103px;
      background-size: contain !important;
      &.icon1 {
        background: url("../../assets/img/home-1114.png") no-repeat center center;
      }
      &.icon2 {
        background: url("../../assets/img/home-1115.png") no-repeat center center;
      }
      &.icon3 {
        background: url("../../assets/img/home-1116.png") no-repeat center center;
      }
    }
    .desc {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      line-height: 1;
    }
    .count {
      font-size: 29px;
      font-weight: 500;
      line-height: 1;
      margin-top: 12px;
      &.count1 {
        color: #9acefa;
      }
      &.count2 {
        color: #ff8dbd;
      }
      &.count3 {
        color: #33ff85;
      }
    }
  }
}
</style>